<template>
  <div class="alivePrc">
     <button v-for="tab in tabs" :key="tab" :class="['tab-button',{active:currentTab===tab}]"
       @click="currentTab=tab">
          {{tab}}
       </button>

       <keep-alive>
          <component :is="currentTabComponent"></component>
       </keep-alive>
  </div>
</template>

<script lang="ts">
import { Vue, Options, Prop, Inject } from 'vue-property-decorator';
import AliveHome  from './AliveHome.vue';
import AlivePost  from './AlivePost.vue';
import AliveArchive from './AliveArchive.vue';


@Options({ components: {
  AliveHome,
  AlivePost,
  AliveArchive,
} })
export default class AlivePrc extends Vue {
  @Inject()
  user!: string;


  public currentTab = 'Home';
  public tabs = ['Home', 'Post', 'Archive'];

  public get currentTabComponent() {
    return `Alive${this.currentTab}`;
  }
  public created() {
    // console.log('$attrs', this.$attrs);
  }
}
</script>

<style lang="postcss">
.alivePrc{
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
  .tab-button {
    padding: 6px 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #ccc;
    cursor: pointer;
    background: #f0f0f0;
    margin-bottom: -1px;
    margin-right: -1px;
  }
  .tab-button:hover {
    background: #e0e0e0;
  }
  .tab-button.active {
    background: #e0e0e0;
  }
}
</style>
